<template>
    <div class="app-container calendar-list-container">
        <basic-container>
            <div class="title">账号管理</div>
            <el-collapse v-model="activeNames">
                <el-collapse-item name="1">
                    <template slot="title">
                        <div class="title-item">
                            <div>登录密码：</div>
                            <div>登录商家后台时需要登录的密码</div>
                            <div>修改密码</div>
                        </div>
                    </template>
                    <div class="form">
                        <el-form
                            :model="passwordForm"
                            ref="passwordFormRef"
                            :rules="passwordFormRules"
                            label-width="150px"
                            :inline="false"
                            size="normal"
                        >
                            <el-form-item label="当前密码">
                                <el-input v-model="passwordForm.a"></el-input>
                            </el-form-item>
                            <el-form-item label="设置密码">
                                <el-input v-model="passwordForm.b"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码">
                                <el-input v-model="passwordForm.c"></el-input>
                            </el-form-item>
                            <el-form-item label="手机号码">
                                <el-input
                                    disabled
                                    v-model="passwordForm.d"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <el-input v-model="passwordForm.e">
                                    <template slot="append"
                                        >获取验证码</template
                                    >
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button class="submit-btn" type="primary" @click="onSubmit"
                                    >提 交</el-button
                                >
                            </el-form-item>
                        </el-form>
                    </div>
                </el-collapse-item>
                <el-collapse-item name="2">
                    <template slot="title">
                        <div class="title-item">
                            <div>绑定手机：</div>
                            <div>19999999999(用于忘记密码时找回)</div>
                            <div>修改手机号</div>
                        </div>
                    </template>
                    <Steps :active="activeStep" class="steps"/>
                    <div class="form" v-if="activeStep === 0">
                        
                        <el-form
                            :model="passwordForm"
                            ref="passwordFormRef"
                            :rules="passwordFormRules"
                            label-width="150px"
                            :inline="false"
                            size="normal"
                        >
                            <el-form-item label="当前绑定手机号码">
                                <el-input
                                    disabled
                                    v-model="passwordForm.d"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="验证码">
                                <el-input v-model="passwordForm.e">
                                    <template slot="append"
                                        >获取验证码</template
                                    >
                                </el-input>
                            </el-form-item>
                            <el-form-item >
                                <el-button class="submit-btn" type="primary" @click="handleChangeOne"
                                    >提 交</el-button
                                >
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="form" v-if="activeStep === 1">
                        
                        <el-form
                            :model="passwordForm"
                            ref="passwordFormRef"
                            :rules="passwordFormRules"
                            label-width="150px"
                            :inline="false"
                            size="normal"
                        >
                            <el-form-item label="更改手机号码">
                                <el-input
                                    v-model="passwordForm.d"
                                ></el-input>
                            </el-form-item>
                                <el-button class="submit-btn" type="primary" @click="handleChangeTwo"
                                    >下一步</el-button
                                >
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="form" v-if="activeStep === 2">
                        
                        <el-form
                            :model="passwordForm"
                            ref="passwordFormRef"
                            :rules="passwordFormRules"
                            label-width="150px"
                            :inline="false"
                            size="normal"
                        >
                            <el-form-item label="当前手机号码">
                                <el-input
                                    disabled
                                    v-model="passwordForm.d"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="更改手机号码">
                                <el-input
                                    disabled
                                    v-model="passwordForm.d"
                                ></el-input>
                            </el-form-item>
                            <el-form-item >
                                <el-button type="primary" @click="handleBack"
                                    >返 回</el-button
                                >
                                <el-button type="primary" @click="handleSubmit"
                                    >确认更改</el-button
                                >
                            </el-form-item>
                        </el-form>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </basic-container>
    </div>
</template>

<script>
import Steps from './components/Steps'
export default {
  components: {
    Steps,
  },
    data() {
        return {
            activeNames: ["1","2"],
            passwordForm: {},
            passwordFormRules: {},
            activeStep:0,
        };
    },
    methods: {
        handleChangeOne() {
          this.activeStep = 1
        },

        handleChangeTwo() {
          this.activeStep = 2
        },

        handleBack() {
          this.activeStep = 1
        },
        handleSubmit() {
          this.$message.success("修改绑定手机成功")
          this.activeStep = 3
        }
    },
};
</script>

<style lang="scss" scoped>
.title {
    margin-bottom: 20px;
}
.title-item {
    width: 98%;
    display: flex;
    justify-content: space-between;
}
.form {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.submit-btn{
  width: 313px;
}
.steps{
  width: 80%;
  margin: 20px auto;
}
</style>